<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{title}}</title>

    <!-- 百度统计 -->
    <script src="/apps/js/baidu-tongji-mtx.js"></script>

    <!-- Bootstrap 5 CSS -->
    <link href="/apps/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="/apps/css/all.min.css" rel="stylesheet">

    <style>
        body {
            background: #f8f9fa;
            font-family: 'Microsoft YaHei', sans-serif;
        }

        .container {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }

        .card {
            border: none;
            border-radius: 15px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        }

        .card-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 15px 15px 0 0 !important;
            padding: 20px;
        }

        .form-label {
            font-weight: bold;
            color: #333;
            margin-bottom: 8px;
        }

        .form-control {
            border-radius: 10px;
            border: 2px solid #e9ecef;
            padding: 12px 15px;
            transition: all 0.3s ease;
        }

        .form-control:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
        }

        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            border-radius: 25px;
            padding: 12px 30px;
            font-weight: bold;
        }

        .btn-secondary {
            background: #6c757d;
            border: none;
            border-radius: 25px;
            padding: 12px 30px;
        }

        .image-preview {
            width: 100px;
            height: 100px;
            border-radius: 10px;
            object-fit: cover;
            border: 2px solid #e9ecef;
            margin: 10px 0;
        }

        .upload-btn {
            background: #f8f9fa;
            border: 2px dashed #dee2e6;
            border-radius: 10px;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .upload-btn:hover {
            border-color: #667eea;
            background: #f0f2ff;
        }

        .tags-container {
            border: 2px solid #e9ecef;
            border-radius: 10px;
            padding: 15px;
            min-height: 100px;
        }

        .tag-item {
            display: inline-block;
            background: #e9ecef;
            color: #495057;
            padding: 5px 12px;
            margin: 3px;
            border-radius: 15px;
            font-size: 14px;
        }

        .tag-item .remove-tag {
            margin-left: 8px;
            cursor: pointer;
            color: #dc3545;
        }

        .section-title {
            color: #667eea;
            font-weight: bold;
            margin: 30px 0 20px 0;
            padding-bottom: 10px;
            border-bottom: 2px solid #e9ecef;
        }

        .alert {
            border-radius: 10px;
            border: none;
        }

        .loading {
            display: none;
            text-align: center;
            padding: 20px;
        }

        .spinner-border {
            width: 2rem;
            height: 2rem;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="card">
            <div class="card-header">
                <h4 class="mb-0">
                    <i class="fas fa-id-card"></i> {{title}}
                </h4>
            </div>

            <div class="card-body">
                <form id="cardForm">
                    <!-- 基本信息 -->
                    <h5 class="section-title">
                        <i class="fas fa-user"></i> 基本信息
                    </h5>

                    <div class="row">
                        <div class="col-md-6">
                            <label class="form-label">姓名 *</label>
                            <input type="text" class="form-control" name="name" value="{{card.name}}" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">职位</label>
                            <input type="text" class="form-control" name="position" value="{{card.position}}">
                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="col-md-6">
                            <label class="form-label">头像</label>
                            <div class="upload-btn" onclick="uploadImage('avatar')">
                                {{#if card.avatar}}
                                <img src="{{card.avatar}}" alt="头像" class="image-preview">
                                {{else}}
                                <i class="fas fa-camera fa-2x text-muted"></i>
                                <p class="mt-2 mb-0 text-muted">点击上传头像</p>
                                {{/if}}
                            </div>
                            <input type="hidden" name="avatar" value="{{card.avatar}}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">手写签名</label>
                            <div class="upload-btn" onclick="uploadImage('signature')">
                                {{#if card.signature}}
                                <img src="{{card.signature}}" alt="签名" class="image-preview">
                                {{else}}
                                <i class="fas fa-signature fa-2x text-muted"></i>
                                <p class="mt-2 mb-0 text-muted">点击上传签名</p>
                                {{/if}}
                            </div>
                            <input type="hidden" name="signature" value="{{card.signature}}">
                        </div>
                    </div>

                    <!-- 组织信息 -->
                    <h5 class="section-title">
                        <i class="fas fa-building"></i> 组织信息
                    </h5>

                    <div class="row">
                        <div class="col-md-6">
                            <label class="form-label">公司/组织名称</label>
                            <input type="text" class="form-control" name="org_name" value="{{card.org_name}}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">组织Logo</label>
                            <div class="upload-btn" onclick="uploadImage('org_logo')">
                                {{#if card.org_logo}}
                                <img src="{{card.org_logo}}" alt="Logo" class="image-preview">
                                {{else}}
                                <i class="fas fa-image fa-2x text-muted"></i>
                                <p class="mt-2 mb-0 text-muted">点击上传Logo</p>
                                {{/if}}
                            </div>
                            <input type="hidden" name="org_logo" value="{{card.org_logo}}">
                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="col-12">
                            <label class="form-label">组织简介</label>
                            <textarea class="form-control" name="org_intro" rows="3" placeholder="简要介绍您的组织">{{card.org_intro}}</textarea>
                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="col-12">
                            <label class="form-label">组织详情</label>
                            <textarea class="form-control" name="org_detail" rows="5" placeholder="详细介绍您的组织">{{card.org_detail}}</textarea>
                        </div>
                    </div>

                    <!-- 联系方式 -->
                    <h5 class="section-title">
                        <i class="fas fa-address-book"></i> 联系方式
                    </h5>

                    <div class="row">
                        <div class="col-md-6">
                            <label class="form-label">手机号</label>
                            <input type="tel" class="form-control" name="mobile" value="{{card.mobile}}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">座机/传真</label>
                            <input type="tel" class="form-control" name="phone" value="{{card.phone}}">
                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="col-md-6">
                            <label class="form-label">邮箱</label>
                            <input type="email" class="form-control" name="email" value="{{card.email}}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">网址</label>
                            <input type="url" class="form-control" name="website" value="{{card.website}}" placeholder="https://">
                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="col-12">
                            <label class="form-label">地址</label>
                            <input type="text" class="form-control" name="address" value="{{card.address}}">
                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="col-md-6">
                            <label class="form-label">经度</label>
                            <input type="number" step="0.000001" class="form-control" name="geo_lng" value="{{card.geo.lng}}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">纬度</label>
                            <input type="number" step="0.000001" class="form-control" name="geo_lat" value="{{card.geo.lat}}">
                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="col-12">
                            <label class="form-label">微信二维码</label>
                            <div class="upload-btn" onclick="uploadImage('wechat_qrcode')">
                                {{#if card.wechat_qrcode}}
                                <img src="{{card.wechat_qrcode}}" alt="微信二维码" class="image-preview">
                                {{else}}
                                <i class="fab fa-weixin fa-2x text-muted"></i>
                                <p class="mt-2 mb-0 text-muted">点击上传微信二维码</p>
                                {{/if}}
                            </div>
                            <input type="hidden" name="wechat_qrcode" value="{{card.wechat_qrcode}}">
                        </div>
                    </div>

                    <!-- 标签信息 -->
                    <h5 class="section-title">
                        <i class="fas fa-tags"></i> 标签信息
                    </h5>

                    <div class="row">
                        <div class="col-12">
                            <label class="form-label">标签</label>
                            <div class="input-group">
                                <input type="text" class="form-control" id="tagInput" placeholder="输入标签内容">
                                <button type="button" class="btn btn-outline-secondary" onclick="addTag()">
                                    <i class="fas fa-plus"></i> 添加
                                </button>
                            </div>
                            <div class="tags-container mt-2" id="tagsContainer">
                                {{#if card.tags}}
                                {{#each card.tags}}
                                <span class="tag-item">
                                    {{this}}
                                    <span class="remove-tag" onclick="removeTag(this)">×</span>
                                </span>
                                {{/each}}
                                {{/if}}
                            </div>
                            <input type="hidden" name="tags" id="tagsInput" value="{{#if card.tags}}{{join card.tags ','}}{{/if}}">
                        </div>
                    </div>

                    <!-- 操作按钮 -->
                    <div class="row mt-4">
                        <div class="col-12 text-center">
                            <button type="submit" class="btn btn-primary me-2">
                                <i class="fas fa-save"></i> 保存名片
                            </button>
                            <a href="/apps/card/my" class="btn btn-secondary">
                                <i class="fas fa-arrow-left"></i> 返回管理
                            </a>
                        </div>
                    </div>
                </form>

                <div class="loading" id="loading">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">保存中...</span>
                    </div>
                    <p class="mt-2">正在保存名片信息...</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 微信JS SDK -->
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js" defer></script>
    <!-- Bootstrap JS -->
    <script src="/apps/js/bootstrap.bundle.min.js" defer></script>
    <!-- 微信客户端DOM -->
    <script src="/apps/js/wx-client-dom.js" defer></script>

    <script>
        // 图片上传功能
        function uploadImage(fieldName) {
            const input = document.createElement('input');
            input.type = 'file';
            input.accept = 'image/*';
            input.onchange = function(e) {
                const file = e.target.files[0];
                if (file) {
                    uploadFile(file, fieldName);
                }
            };
            input.click();
        }

        function uploadFile(file, fieldName) {
            const formData = new FormData();
            formData.append('file', file);
            formData.append('uid', '{{user.uid}}');
            formData.append('code', 'card');

            fetch('https://mall.totembio.cn/api/uploadMtaFile', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(result => {
                if (result.status === 200 && result.data && result.data.src) {
                    // 更新隐藏字段
                    document.querySelector(`input[name="${fieldName}"]`).value = result.data.src;

                    // 更新预览图片
                    const uploadBtn = document.querySelector(`input[name="${fieldName}"]`).previousElementSibling;
                    uploadBtn.innerHTML = `
                        <img src="${result.data.src}" alt="预览" class="image-preview">
                    `;

                    showNotification('图片上传成功', 'success');
                } else {
                    showNotification(result.msg || '图片上传失败', 'error');
                }
            })
            .catch(error => {
                console.error('上传错误:', error);
                showNotification('图片上传失败', 'error');
            });
        }

        // 标签管理
        function addTag() {
            const tagInput = document.getElementById('tagInput');
            const tag = tagInput.value.trim();

            if (tag) {
                const tagsContainer = document.getElementById('tagsContainer');
                const tagElement = document.createElement('span');
                tagElement.className = 'tag-item';
                tagElement.innerHTML = `
                    ${tag}
                    <span class="remove-tag" onclick="removeTag(this)">×</span>
                `;
                tagsContainer.appendChild(tagElement);

                tagInput.value = '';
                updateTagsInput();
            }
        }

        function removeTag(element) {
            element.parentElement.remove();
            updateTagsInput();
        }

        function updateTagsInput() {
            const tags = Array.from(document.querySelectorAll('.tag-item')).map(tag =>
                tag.textContent.replace('×', '').trim()
            );
            document.getElementById('tagsInput').value = tags.join(',');
        }

        // 表单提交
        document.getElementById('cardForm').addEventListener('submit', function(e) {
            e.preventDefault();

            const formData = new FormData(this);
            const data = {};

            for (let [key, value] of formData.entries()) {
                if (key === 'tags') {
                    data[key] = value ? value.split(',').filter(tag => tag.trim()) : [];
                } else if (key === 'geo_lng' || key === 'geo_lat') {
                    if (!data.geo) data.geo = {};
                    data.geo[key.replace('geo_', '')] = parseFloat(value) || null;
                } else {
                    data[key] = value;
                }
            }

            // 显示加载状态
            document.getElementById('loading').style.display = 'block';
            document.querySelector('button[type="submit"]').disabled = true;

            fetch('/apps/card/save', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            })
            .then(response => response.json())
            .then(result => {
                if (result.success) {
                    showNotification(result.message, 'success');
                    setTimeout(() => {
                        window.location.href = '/apps/card/my';
                    }, 1500);
                } else {
                    showNotification(result.message, 'error');
                }
            })
            .catch(error => {
                console.error('保存错误:', error);
                showNotification('保存失败', 'error');
            })
            .finally(() => {
                document.getElementById('loading').style.display = 'none';
                document.querySelector('button[type="submit"]').disabled = false;
            });
        });

        // 系统通知
        function showNotification(message, type) {
            if (typeof showSystemNotification === 'function') {
                showSystemNotification(message, type);
            } else {
                alert(message);
            }
        }

        // 回车添加标签
        document.getElementById('tagInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                addTag();
            }
        });
    </script>
</body>
</html>